<template>
	<view>
		<view class="container input-container">
			<view class="row header-row">
				<view class="item">
					<view class="header-icon"></view>
					<text class="title-text">上传微信二维码</text>
				</view>
			</view>
			<view class="row">
				<view class="item">
					<text class="remark-text">我的微信收款码</text>
				</view>
			</view>
			<view class="row image-row">
				<view class="item add-item" v-for="(item,index) in oldImg" :key='index'>
					<image src="@/static/img/close-ico.png" class="delete-icon" @click='deleteImg(index)'>
					</image>
					<image class="choose-image" :src="item" mode="aspectFill" @click="previewImage(index)">
					</image>
				</view>
				<view class="item add-item" v-for="(item,index) in codeImg" :key='index'>
					<image src="@/static/img/close-ico.png" class="delete-icon" @click='deleteImg(index)'>
					</image>
					<image class="choose-image" :src="item" mode="aspectFill" @click="previewImage(index)">
					</image>
				</view>
				<view class="item add-item" id='fileUploadBtn' @click="chooseImgs()" v-show="(oldImg.length+codeImg.length) < 1">
					<image class="add-icon" src="@/static/img/upload-ico.png">
					</image>
					<text>点击上传</text>
				</view>
			</view>
		</view>
		<view class="container foot-container">
			<view class="row" @click="backSubmit">
				<image src="@/static/img/submit-btn.png" class="submit-icon" style="height: 72px;">
		
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from '../../apirequest/config.js'
	import {getShoukuan,shoukuanSubmit} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				lock: 0,
				oldImg: [],
				codeImg: [],
			}
		},
		onLoad(options) {
			this.loadData();
		},
		methods: {
			//获取数据
			loadData: function() {
				getShoukuan({}).then((res) => {
					if (res.code == 1) {
						if (res.data) {
							this.oldImg = [res.data]
						}
					}
				}).catch(err => {
					console.log(err)
				})
			},
			// 选择图片
			chooseImgs: function() {
				var _this = this
				uni.chooseImage({
					count: 2,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log("tempFilePaths")
						console.log(res.tempFilePaths)
						const tempFilePaths = res.tempFilePaths
						_this.oldImg = [];
						for (var i = 0; i < tempFilePaths.length; i++) {
							_this.codeImg.push(tempFilePaths[i]);
							console.log("tempFilePaths" + tempFilePaths[i])
						}

					}
				})
			},
			//图片预览
			previewImage: function(index) {
				var _this = this
				//所有图片
				var imgbox = _this.codeImg;
				if (_this.oldImg) {
					var imgbox = _this.oldImg;
				}
				uni.previewImage({
					//当前显示图片
					current: imgbox[index],
					//所有图片
					urls: imgbox
				})
			},
			// 删除图片
			deleteImg: function(index) {
				var _this = this;
				if (_this.oldImg) {
					_this.oldImg.splice(index, 1)
				} else {
					_this.codeImg.splice(index, 1)
				}
				
			},
			
			backSubmit:function(){
			    var e = this;
			    if(e.lock)return;	
			    if(!e.codeImg.length){
					return;	
				}				
			    var _submit = function (data) {
			          shoukuanSubmit(data).then((res) => {
						if(res.code == 1){
							uni.showToast({
								title:res.msg,
								icon:"success"
							});
						} else{
							uni.showToast({
								title:res.msg,
								icon:"error"
							});
							e.lock = 0;
						}
			          }).catch(err => {
			          	 console.log(err)
			          })
			    };
			   var upload_image = function(filePath){
			      uni.showLoading({
			        title: "正在上传图片",
			        mask: !0
			      }),uni.uploadFile({
			        url: baseUrl + 'common/upload',
			        filePath:filePath,
			        name: 'file',
			        header:{
			          //'content-type': 'multipart/form-data',
			          "token" : uni.getStorageSync('token')
			        },
			        success:function(data){
			            console.log(data)
			            uni.hideLoading({
			              complete: (res) => {},
			            }) 
			            var img_res = JSON.parse(data.data)
			            if(img_res.code == 1){
			              _submit({img:img_res.data.url})
			            } else {
						  e.lock = 0;
			              uni.showToast({
			                title: img_res.msg,
			                icon:'none'
			              });
			            }
			          }
			      })
			    }
			    upload_image(e.codeImg[0]);
			  },
			  
		}
	}
</script>

<style>
	.container {
		margin: 0 11px;
		margin-top: 9px;
		display: flex;
		flex-flow: column;
		background-color: #fff;
		border-radius: 9px
	}
	
	.container .row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 11px;
		margin-top: 9px
	}
	
	.container .row .item {
		display: flex;
		align-items: center
	}
	
	.container .row .item .step-image {
		width: 28px;
		height: 28px
	}
	
	.container .row .item .step-text {
		color: #333;
		font-size: 28rpx;
	}
	
	.container .row .item .right-two-icon {
		width: 15px;
		height: 15px
	}
	
	.container .row .item .title-text {
		color: #333;
		font-size: 32rpx;
		;
		font-weight: 700
	}
	
	.container .row .item .remark-text {
		color: #9399a3;
		font-size: 28rpx;
	}
	
	.container .row .item .x-red {
		color: red;
		font-size: 28rpx;
		;
		width: 19px;
		height: 9px;
		display: inline-block;
		vertical-align: top;
		text-align: center;
		line-height: 15px
	}
	.input-container {
		padding-bottom: 9px
	}

	.input-container .row .item .screentshot-image {
		width: 13px;
		height: 13px;
		margin-right: 4px
	}

	.input-container .row .item .screentshot-text {
		color: #005cff;
		font-size: 10px
	}

	.input-container .row .item .star-icon {
		width: 15px;
		height: 15px;
		margin-left: 4px
	}

	.input-container .row .order-input {
		padding: 9px 11px;
		width: 100%;
		background: #f8f9f9;
		border-radius: 3px;
		border: 1px solid #e9eaec;
		font-size: 28rpx;
	}

	.input-container .row .add-item {
		width: 105px;
		height: 105px;
		color: #bec1c7;
		font-size: 24rpx;
		justify-content: center;
		flex-flow: column;
		background-color: #f8f9f9;
		border-radius: 7px;
		border: 1px solid #e9eaec;
		position: relative
	}

	.input-container .row .add-item .add-icon {
		width: 33px;
		height: 33px;
		margin-bottom: 4px
	}

	.input-container .row .add-item .delete-icon {
		position: absolute;
		top: -7px;
		right: -7px;
		width: 19px;
		height: 19px
	}

	.input-container .row .add-item .choose-image {
		width: 100%;
		height: 100%;
		border-radius: 7px
	}

	.input-container .image-row {
		justify-content: flex-start
	}

	.input-container .image-row .item {
		margin-right: 9px
	}

	.input-container .header-row {
		margin-left: 0
	}

	.input-container .header-row .item .header-icon {
		width: 3px;
		height: 18px;
		background-color: #ff8546;
		margin-right: 5px
	}
	.foot-container {
		background-color: unset;
		margin-left: 0;
		margin-right: 0;
		margin-top: 100rpx;
	}
	
	.foot-container .row {
		margin: 0
	}
	
	.foot-container .row .submit-icon {
		width: 100%
	}
</style>
